import 'package:flutter/material.dart';
import '../core/responsive/breakpoints.dart';
import '../core/responsive/responsive_utils.dart';

/// 个人中心页面 - 响应式企业级设计
/// 根据设备类型（手机/平板/桌面）自动调整布局
class ProfilePage extends StatelessWidget {
  const ProfilePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: Center(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: context.responsiveMaxContentWidth,
          ),
          child: _buildResponsiveContent(context),
        ),
      ),
    );
  }

  /// 构建响应式内容布局
  Widget _buildResponsiveContent(BuildContext context) {
    final isDesktop = AppBreakpoints.isDesktop(context);
    final padding = context.responsivePadding;
    
    return SingleChildScrollView(
      padding: padding,
      child: Column(
        children: [
          SizedBox(height: ResponsiveUtils.getResponsiveValue(
            context: context,
            mobile: 20.0,
            tablet: 32.0,
            desktop: 40.0,
            largeDesktop: 48.0,
          )),
          
          // 用户头像 - 响应式大小
          _buildResponsiveAvatar(context),
          
          SizedBox(height: ResponsiveUtils.getResponsiveValue(
            context: context,
            mobile: 16.0,
            tablet: 20.0,
            desktop: 24.0,
            largeDesktop: 32.0,
          )),
          
          // 用户信息 - 响应式布局
          _buildResponsiveUserInfo(context),
          
          SizedBox(height: ResponsiveUtils.getResponsiveValue(
            context: context,
            mobile: 32.0,
            tablet: 40.0,
            desktop: 48.0,
            largeDesktop: 64.0,
          )),
          
          // 设置选项列表 - 响应式网格
          _buildResponsiveSettingsGrid(context),
          
          SizedBox(height: ResponsiveUtils.getResponsiveValue(
            context: context,
            mobile: 32.0,
            tablet: 40.0,
            desktop: 48.0,
            largeDesktop: 64.0,
          )),
          
          // 版本信息
          _buildResponsiveVersionInfo(context),
        ],
      ),
    );
  }

  /// 构建响应式用户头像
  Widget _buildResponsiveAvatar(BuildContext context) {
    final avatarSize = ResponsiveUtils.getResponsiveValue(
      context: context,
      mobile: 80.0,
      tablet: 100.0,
      desktop: 120.0,
      largeDesktop: 140.0,
    );
    
    return Container(
      width: avatarSize,
      height: avatarSize,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Theme.of(context).primaryColor.withOpacity(0.1),
        border: Border.all(
          color: Theme.of(context).primaryColor,
          width: 2.0,
        ),
      ),
      child: Icon(
        Icons.person,
        size: avatarSize * 0.6,
        color: Theme.of(context).primaryColor,
      ),
    );
  }

  /// 构建响应式用户信息
  Widget _buildResponsiveUserInfo(BuildContext context) {
    final isDesktop = AppBreakpoints.isDesktop(context);
    
    return Column(
      children: [
        // 用户名
        Text(
          '用户名',
          style: TextStyle(
            fontSize: ResponsiveUtils.getResponsiveValue(
              context: context,
              mobile: 20.0,
              tablet: 24.0,
              desktop: 28.0,
              largeDesktop: 32.0,
            ),
            fontWeight: FontWeight.bold,
            color: Theme.of(context).textTheme.headlineMedium?.color,
          ),
        ),
        
        SizedBox(height: ResponsiveUtils.getResponsiveValue(
          context: context,
          mobile: 4.0,
          tablet: 6.0,
          desktop: 8.0,
          largeDesktop: 12.0,
        )),
        
        // 用户邮箱
        Text(
          'user@example.com',
          style: TextStyle(
            fontSize: context.responsiveBodyFontSize,
            color: Theme.of(context).textTheme.bodyMedium?.color,
          ),
        ),
      ],
    );
  }

  /// 构建响应式设置选项网格
  Widget _buildResponsiveSettingsGrid(BuildContext context) {
    final crossAxisCount = ResponsiveUtils.getResponsiveValue(
      context: context,
      mobile: 1,
      tablet: 2,
      desktop: 2,
      largeDesktop: 3,
    );
    
    final spacing = ResponsiveUtils.getResponsiveValue(
      context: context,
      mobile: 8.0,
      tablet: 12.0,
      desktop: 16.0,
      largeDesktop: 20.0,
    );
    
    final items = [
      _ProfileItem(
        icon: Icons.account_circle,
        title: '账户设置',
        subtitle: '管理您的账户信息',
        onTap: () {},
      ),
      _ProfileItem(
        icon: Icons.notifications,
        title: '通知设置',
        subtitle: '管理通知偏好',
        onTap: () {},
      ),
      _ProfileItem(
        icon: Icons.privacy_tip,
        title: '隐私政策',
        subtitle: '查看隐私政策',
        onTap: () {},
      ),
      _ProfileItem(
        icon: Icons.info,
        title: '关于我们',
        subtitle: '了解应用信息',
        onTap: () {},
      ),
    ];
    
    if (crossAxisCount == 1) {
      return Column(
        children: items.map((item) => Padding(
          padding: EdgeInsets.only(bottom: spacing),
          child: _buildResponsiveProfileItem(context, item),
        )).toList(),
      );
    }
    
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: crossAxisCount,
      crossAxisSpacing: spacing,
      mainAxisSpacing: spacing,
      childAspectRatio: ResponsiveUtils.getResponsiveValue(
        context: context,
        mobile: 3.0,
        tablet: 2.5,
        desktop: 2.2,
        largeDesktop: 2.0,
      ),
      children: items.map((item) => _buildResponsiveProfileItem(context, item)).toList(),
    );
  }

  /// 构建响应式个人资料项目
  Widget _buildResponsiveProfileItem(BuildContext context, _ProfileItem item) {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(context.responsiveBorderRadius),
      ),
      child: InkWell(
        borderRadius: BorderRadius.circular(context.responsiveBorderRadius),
        onTap: item.onTap,
        child: Padding(
          padding: EdgeInsets.all(ResponsiveUtils.getResponsiveValue(
            context: context,
            mobile: 12.0,
            tablet: 16.0,
            desktop: 20.0,
            largeDesktop: 24.0,
          )),
          child: Row(
            children: [
              Icon(
                item.icon,
                size: context.responsiveIconSize * 1.2,
                color: Theme.of(context).primaryColor,
              ),
              SizedBox(width: ResponsiveUtils.getResponsiveValue(
                context: context,
                mobile: 12.0,
                tablet: 16.0,
                desktop: 20.0,
                largeDesktop: 24.0,
              )),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      item.title,
                      style: TextStyle(
                        fontSize: ResponsiveUtils.getResponsiveValue(
                          context: context,
                          mobile: 16.0,
                          tablet: 18.0,
                          desktop: 20.0,
                          largeDesktop: 22.0,
                        ),
                        fontWeight: FontWeight.w600,
                        color: Theme.of(context).textTheme.titleMedium?.color,
                      ),
                    ),
                    if (item.subtitle != null)
                      Text(
                        item.subtitle!,
                        style: TextStyle(
                          fontSize: ResponsiveUtils.getResponsiveValue(
                            context: context,
                            mobile: 12.0,
                            tablet: 14.0,
                            desktop: 14.0,
                            largeDesktop: 16.0,
                          ),
                          color: Theme.of(context).textTheme.bodySmall?.color,
                        ),
                      ),
                  ],
                ),
              ),
              Icon(
                Icons.chevron_right,
                size: context.responsiveIconSize,
                color: Theme.of(context).textTheme.bodySmall?.color,
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建响应式版本信息
  Widget _buildResponsiveVersionInfo(BuildContext context) {
    return Column(
      children: [
        Text(
          '版本 1.0.0',
          style: TextStyle(
            fontSize: ResponsiveUtils.getResponsiveValue(
              context: context,
              mobile: 12.0,
              tablet: 14.0,
              desktop: 14.0,
              largeDesktop: 16.0,
            ),
            color: Theme.of(context).textTheme.bodySmall?.color,
          ),
        ),
        SizedBox(height: 4.0),
        Text(
          '© 2024 Moolio. All rights reserved.',
          style: TextStyle(
            fontSize: ResponsiveUtils.getResponsiveValue(
              context: context,
              mobile: 10.0,
              tablet: 12.0,
              desktop: 12.0,
              largeDesktop: 14.0,
            ),
            color: Theme.of(context).textTheme.bodySmall?.color,
          ),
        ),
      ],
    );
  }
}

/// 个人资料项目数据模型
class _ProfileItem {
  final IconData icon;
  final String title;
  final String? subtitle;
  final VoidCallback onTap;

  const _ProfileItem({
    required this.icon,
    required this.title,
    this.subtitle,
    required this.onTap,
  });
}